<template>
    <div class="dialog">
      <p>确认修改吗？</p>
      <div class="buttons"> <!-- 新增按钮容器 -->
      <button @click="$emit('confirm')">确认</button>
      <button @click="$emit('cancel')">取消</button>
      </div>
    </div>
  </template>
  
  <style scoped>
  .dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 300px; /* 增加宽度 */
    height: auto; /* 高度自动适应内容 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 使内容水平居中 */
  }
  
  .dialog p {
    margin: 0 0 20px 0; /* 添加底部外边距，使按钮和文字有间隔 */
    text-align: center; /* 文字水平居中 */
    width: 100%; /* 确保文字宽度与对话框一致 */
  }
  
  .dialog button {
    border: none; /* 去掉按钮的默认边框 */
    padding: 10px 20px; /* 增加按钮的内边距 */
    border-radius: 5px; /* 添加圆角 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    margin: 0 10px; /* 为按钮添加水平外边距，使按钮之间有间隔 */
    width: 100px; /* 增加按钮宽度 */
  }
  
  .dialog button:nth-child(1) { /* 确认按钮 */
    background-color: blue;
    color: white;
  }
  
  .dialog button:nth-child(2) { /* 取消按钮 */
    background-color: red;
    color: white;
  }
  
  /* 新增按钮容器 */
  .dialog .buttons {
    display: flex;
    justify-content: space-between; /* 按钮左右排列 */
    width: 100%; /* 按钮容器宽度与对话框一致 */
  }
  </style>